<template>
  <view class="invoice_wrap">
    <view class="invoice_title">{{ tabsTitle }}</view>
    <view class="tabs_wrap clearfix">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        :class="current == item[valueKey] ? 'tab_item active' : 'tab_item'"
        @click="handleChangeType(item[valueKey])"
      >
        <view class="invoice_text">{{ item.label }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    // tab标题
    tabsTitle: {
      type: String,
      default: ''
    },
    // tab集合
    tabList: {
      type: Array,
      default: () => []
    },
    // 当前tab值
    current: {
      type: String || Number,
      default: null
    },
    // 选中tab的value的key，默认为code
    valueKey: {
      type: String,
      default: 'code'
    }
  },
  methods: {
    // 切换tab
    handleChangeType(code) {
      this.$emit('update:current', code)
    }
  }
}
</script>
<style lang="scss" scoped>
.invoice_wrap {
  padding: 16rpx 0 24rpx 0;
  .invoice_title {
    margin-top: 16rpx;
    margin-left: 24rpx;
    color: $uni-text-color-tips;
  }
  .tabs_wrap {
    display: flex;
    margin-top: 16rpx;
    .tab_item {
      height: 72rpx;
      line-height: 72rpx;
      margin-left: 24rpx;
      padding: 0 24rpx;
      font-size: 28rpx;
      background-color: $uni-grey-f9;
      border: 1rpx solid $uni-grey-f9;
      border-radius: 8rpx;
      .invoice_text {
        color: $uni-text-color;
      }
    }
    .active {
      background-color: $uni-bg-color;
      border: 1rpx solid $uni-orange;
      .invoice_text {
        color: $uni-orange;
      }
    }
  }
}
</style>
